<template>
  <div>
    <div class="course">
        <div class="course-1">
            <img src="@/assets/img/course-1.png" alt=""/>
        </div>
        <h2>课程介绍</h2>
        <div class="introduce"  v-if="flag">
            <a href="javascript:;" @click="flag = !flag">
                <div class="introduce-one">
                <img src="@/assets/img/course-2.png" alt="">
                    <div class="content">
                        <h3>场景进阶实体班</h3>
                        <p>主讲老师：徐拯</p>
                        <p>
                            课程内容：课程主要内容游戏、影视、动画场景（概
                            念设计、规划设计、单体设计）全能场景绘画精英班
                        </p>
                        <p>报名咨询QQ：2963242243</p>
                    </div>
                </div>
            </a>
            <a href="javascript:;" @click="flag = !flag">
                <div class="introduce-two introduce-one">
                    <div class="content">
                        <h3>场景进阶实体班</h3>
                        <p>主讲老师：徐拯</p>
                        <p>
                            课程内容：课程主要内容游戏、影视、动画场景（概
                            念设计、规划设计、单体设计）全能场景绘画精英班
                        </p>
                        <p>报名咨询QQ：2963242243</p>
                    </div>
                    <img src="@/assets/img/course-3.png" alt="">
                </div>
            </a>
        </div>
        <CourseSon v-else/>
    </div>
  </div>
</template>

<script setup>
import CourseSon from '@/views/sonview/CourseSon.vue'
import { ref } from 'vue'
const flag = ref(true)
</script>

<style lang="less" scoped>
* {
    padding: 0;
    margin: 0;
}
.course {
    position: relative;
    background-color: #f4f4f4;
    .course-1 {
        width: 100%;
        height: 199px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        img {
            width: 100%;
            height: 100%;
        }
    }
    h2 {
        position: relative;
        z-index: 1;
        font-size: 52px;
        color: #f4f4f4;
        height: 199px;
        line-height: 199px;
    }
    .introduce {
        box-sizing: border-box;
        padding: 55px 330px 115px;
        .introduce-one:hover .content{
            background-color: #C4B282;
        }
        .introduce-one:hover .content p:nth-of-type(3){
            color: #f4f4f4;
        }
        .introduce-one:hover .content {
            ::after {
                border-color: #C4B282 transparent transparent transparent
            }
        }
        .introduce-one {
            width: 1258px;
            height: 369px;
            position: relative;
            img {
                width: 100%;
                height: 100%;
            }
            .content {
                transition: background-color 0.3s linear;
                position: absolute;
                width: 420px;
                height: 369px;
                top: 0;
                right: 0;
                background-color: #202022;
                z-index: 2;
                box-sizing: border-box;
                padding: 70px 22px 0;
                text-align: left;
                h3 {
                    font-size: 35px;
                    color: #f4f4f4;
                }
                p {
                    font-size: 16px;
                    color: #f4f4f4;
                    line-height: 30px;
                    &:nth-of-type(1) {
                        margin-top: 18px;
                    }
                    &:nth-of-type(3) {
                        margin-top: 30px;
                        color: #c6a85c;
                    }
                }
                ::after {
                    transition: all 0.3s linear;
                    top: 50%;
                    margin-top: -9px;
                    left: -27px;
                    content: "";
                    transform: rotate(90deg);
                    z-index: 99;
                    position: absolute;
                    height: 0;
                    width: 0;
                    border-style: solid;
                    border-width: 18px 18px 0px 18px;
                    border-color: #202022 transparent transparent transparent
                }
            }
        }
        .introduce-two {
            margin-top: 30px;
            .content {
                left: 0;
                ::after {
                    content: "";
                    top: 50%;
                    margin-top: -9px;
                    left: auto;
                    right: -27px;
                    transform: rotate(-90deg);
                    z-index: 99;
                    position: absolute;
                    height: 0;
                    width: 0;
                    border-style: solid;
                    border-width: 18px 18px 0px 18px;
                    border-color: #202022 transparent transparent transparent;
                }
            }
        }
    }
}
</style>
